<template>
    <div class="warp">
        <div class="title">系統情報</div>

        <div class="scrollView">
            <div class="row" v-for="(item, index) in systemIntelligence" :key="index">
                <div class="label">{{ item.label }}</div>
                <el-input v-model="item.dataVal"
                    @input="item.dataVal = $setMaxLength(item.dataVal, 100), changeIptFn()"></el-input>
            </div>
            <!-- <div class="row">
                <div class="label">関連因子1</div>
                <el-input></el-input>
            </div>
            <div class="row">
                <div class="label">関連因子2</div>
                <el-input></el-input>
            </div>
            <div class="row">
                <div class="label">関連因子3</div>
                <el-input></el-input>
            </div>
            <div class="row">
                <div class="label">関連因子4</div>
                <el-input></el-input>
            </div>
            <div class="row">
                <div class="label">関連因子5</div>
                <el-input></el-input>
            </div> -->
        </div>
    </div>
</template>

<script>
import _ from 'lodash-es';
export default {
    name: "Unit",
    props: ['systemIntelligence'],
    data() {
        return {
            systemIntelligenceTemp: null,
        };
    },
    components: {},
    watch: {

    },
    methods: {
        changeIptFn() {
            this.$emit('isChangeFlgFn', !_.isEqual(this.systemIntelligenceTemp, this.systemIntelligence))
        }
    },
    created() { },
    mounted() {
        this.systemIntelligenceTemp = _.cloneDeep(this.systemIntelligence);
        //  临时赋值label
        // this.systemIntelligence.forEach((item, index) => {
        //     if (index == 0) item.label = '設備の特徴';
        //     if (index == 1) item.label = '管理項目';
        //     if (index == 2) item.label = '運転面からの要求事項';
        //     if (index == 3) item.label = 'メカニズム';
        //     if (index == 4) item.label = '予想部位';
        //     if (index == 5) item.label = '検査法案';
        //     if (index == 6) item.label = '検討因子';
        // })
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.warp {
    margin-top: 30px;
    // background-color: red;
    height: 77%;
    width: 50%;
    overflow: hidden;

    .title {
        color: #106EBEFF;
        display: flex;
        align-items: center;
        font-weight: 700;
        padding: 0 0 12px 0;

        &::before {
            content: '';
            display: block;
            width: 3px;
            height: 14px;
            background-color: #106EBEFF;
            margin-right: 10px;
            border-radius: 5px;
        }
    }

    .scrollView {
        height: 100%;
        overflow: scroll;
        padding-bottom: 50px;
        width: 100%;
        min-width: 100%;

        .long-ipt {
            width: 500px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
                background-color: #FFF !important;

            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }
    }

    .row {
        display: flex;
        align-items: center;
        margin-top: 12px;

        .label {
            width: 155px;
            min-width: 155px;
        }

        ::v-deep .el-input__inner {
            width: 500px;
            height: 32px;
            background-color: #FFDEACFF;
        }
    }
}
</style>
